<!-- Input and textarea settings
============================ -->

<h2>Input and textarea settings</h2>
<br>
					
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
	<li class="active"><a href="#nino-label-settings" role="tab" data-toggle="tab">Label</a></li>
	<li><a href="#nino-input-settings" role="tab" data-toggle="tab">Input</a></li>
	<li><a href="#nino-validation-settings" role="tab" data-toggle="tab">Validation</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content nino-hideScroll">
	<div class="tab-pane nino-viewport active" id="nino-label-settings">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label text</label>
					<div class="nino-input">
						<input type="text" value="Label text" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Sub text</label>
					<div class="nino-input">
						<input type="text" value="Sub text" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label icon</label>
					<div class="nino-input">
						<input type="text" class="nino-font-box" name="nino-font-box" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label position</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-label-position" id="nino-label-position-1" value="nino-contact-form-pro-label-position-1">
								<label for="nino-label-position-1">
									<span>None</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-label-position" id="nino-label-position-2" value="nino-contact-form-pro-label-position-2">
								<label for="nino-label-position-2">
									<span>Left</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" checked="checked" name="nino-label-position" id="nino-label-position-3" value="nino-contact-form-pro-label-position-3">
								<label for="nino-label-position-3">
									<span>Top</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Fonts</label>
					<div class="nino-input nino-select-box-style">
						<select>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<i></i>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Font size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-pane nino-viewport" id="nino-input-settings">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Placeholder</label>
					<div class="nino-input">
						<input type="text" value="placeholder" />
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input value</label>
					<div class="nino-input">
						<input type="text" value="input value" />
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input icon</label>
					<div class="nino-input">
						<input type="text" class="nino-font-box" name="nino-font-box" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
		</div>
		<hr />
		<h3>Textarea</h3>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>height (px)</label>
					<div class="nino-input">
						<input type="number" value="200">
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Maximum Characters</label>
					<div class="nino-input">
						<input type="number" value="200">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-pane nino-viewport" id="nino-validation-settings">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Required</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-required" id="nino-input-required-1" value="nino-contact-form-pro-input-irequired-1">
								<label for="nino-input-required-1">
									<span>No</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-required" id="nino-input-required-2" value="nino-contact-form-pro-input-required-2">
								<label for="nino-input-required-2">
									<span>Yes</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-1">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Required Message</label>
					<div class="nino-input">
						<input type="text" value="This is a required field" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- select box / multi choice settings
============================ -->

<h2>Select box / multi choice settings</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
	<li><a href="#nino-label-settings-1" role="tab" data-toggle="tab">Label</a></li>
	<li class="active"><a href="#nino-input-settings-1" role="tab" data-toggle="tab">Input</a></li>
	<li><a href="#nino-validation-settings-1" role="tab" data-toggle="tab">Validation</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane" id="nino-label-settings-1">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label text</label>
					<div class="nino-input">
						<input type="text" value="Label text" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Sub text</label>
					<div class="nino-input">
						<input type="text" value="Sub text" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label icon</label>
					<div class="nino-input">
						<input type="text" class="nino-font-box" name="nino-font-box" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label position</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-label-position" id="nino-label-position-1" value="nino-contact-form-pro-label-position-1">
								<label for="nino-label-position-1">
									<span>None</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-label-position" id="nino-label-position-2" value="nino-contact-form-pro-label-position-2">
								<label for="nino-label-position-2">
									<span>Left</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" checked="checked" name="nino-label-position" id="nino-label-position-3" value="nino-contact-form-pro-label-position-3">
								<label for="nino-label-position-3">
									<span>Top</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Fonts</label>
					<div class="nino-input nino-select-box-style">
						<select>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<i></i>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Font size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-pane active" id="nino-input-settings-1">
		<div class="nino-grid-layout-1 nino-listOfChoice">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<div class="nino-grid-layout-3">
						<div class="nino-grid-col"><h6>List of choice</h6></div>
						<div class="nino-grid-col"><label><input type="checkbox" />Custom value</label></div>
					</div>
					<div class="nino-input">
						<ul>
							<li>
								<div class="nino-grid-layout-3">
									<div class="nino-grid-col">
										<input type="text" value="Option">
									</div>
									<div class="nino-grid-col">
										<input type="text" value="Custom value">
									</div>
									<div class="nino-grid-col">
										<div class="nino-listOfChoiceAction">
											<div class="nino-input-style">
												<input type="radio" checked="" id="nino-selectbox-listOfChoice-name" name="nino-selectbox-listOfChoice-group">
												<label for="nino-selectbox-listOfChoice-name"></label>
											</div>
											<span class="fa fa-close"></span>
											<span class="fa fa-arrows"></span>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="nino-grid-layout-3">
									<div class="nino-grid-col">
										<input type="text" value="Option">
									</div>
									<div class="nino-grid-col">
										<input type="text" value="Custom value">
									</div>
									<div class="nino-grid-col">
										<div class="nino-listOfChoiceAction">
											<div class="nino-input-style">
												<input type="radio" id="nino-selectbox-listOfChoice-name-1" name="nino-selectbox-listOfChoice-group">
												<label for="nino-selectbox-listOfChoice-name-1"></label>
											</div>
											<span class="fa fa-close"></span>
											<span class="fa fa-arrows"></span>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="nino-grid-layout-3">
									<div class="nino-grid-col">
										<input type="text" value="Option">
									</div>
									<div class="nino-grid-col">
										<input type="text" value="Custom value">
									</div>
									<div class="nino-grid-col">
										<div class="nino-listOfChoiceAction">
											<div class="nino-input-style">
												<input type="radio" id="nino-selectbox-listOfChoice-name-3" name="nino-selectbox-listOfChoice-group">
												<label for="nino-selectbox-listOfChoice-name-3"></label>
											</div>
											<span class="fa fa-close"></span>
											<span class="fa fa-arrows"></span>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<a href="#" class="nino-addMoreChoice"><span class="fa fa-plus"></span> Add more</a>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Alignment</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-alignment" id="nino-input-alignment-1" value="nino-contact-form-pro-input-alignment-1">
								<label for="nino-input-alignment-1">
									<span>Left</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-alignment" id="nino-input-alignment-2" value="nino-contact-form-pro-input-alignment-2">
								<label for="nino-input-alignment-2">
									<span>Center</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" checked="checked" name="nino-input-alignment" id="nino-input-alignment-3" value="nino-contact-form-pro-input-alignment-3">
								<label for="nino-input-alignment-3">
									<span>Right</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input Size</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-size" id="nino-input-size-1" value="nino-contact-form-pro-input-size-1">
								<label for="nino-input-size-1">
									<span>Small</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-size" id="nino-input-size-2" value="nino-contact-form-pro-input-size-2">
								<label for="nino-input-size-2">
									<span>Medium</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" checked="checked" name="nino-input-size" id="nino-input-size-3" value="nino-contact-form-pro-input-size-3">
								<label for="nino-input-size-3">
									<span>Large</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input Text Color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box"></input>
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input Background color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box"></input>
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-3">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Border color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box"></input>
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Border width <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Border radius <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Fonts</label>
					<div class="nino-input nino-select-box-style">
						<select>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<i></i>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Font size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-pane" id="nino-validation-settings-1">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Required</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-required" id="nino-input-required-1" value="nino-contact-form-pro-input-irequired-1">
								<label for="nino-input-required-1">
									<span>No</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-required" id="nino-input-required-2" value="nino-contact-form-pro-input-required-2">
								<label for="nino-input-required-2">
									<span>Yes</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-1">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Required Message</label>
					<div class="nino-input">
						<input type="text" value="This is a required field" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<hr />



<!-- checkbox / radio settings
============================ -->

<h2>Checkbox / Radio button settings</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
	<li><a href="#nino-label-settings-2" role="tab" data-toggle="tab">Label</a></li>
	<li><a href="#nino-input-settings-2" role="tab" data-toggle="tab">Input</a></li>
	<li class="active"><a href="#nino-validation-settings-2" role="tab" data-toggle="tab">Validation</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane" id="nino-label-settings-2">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label text</label>
					<div class="nino-input">
						<input type="text" value="Label text" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Sub text</label>
					<div class="nino-input">
						<input type="text" value="Sub text" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label icon</label>
					<div class="nino-input">
						<input type="text" class="nino-font-box" name="nino-font-box" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label position</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-label-position" id="nino-label-position-1" value="nino-contact-form-pro-label-position-1">
								<label for="nino-label-position-1">
									<span>None</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-label-position" id="nino-label-position-2" value="nino-contact-form-pro-label-position-2">
								<label for="nino-label-position-2">
									<span>Left</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" checked="checked" name="nino-label-position" id="nino-label-position-3" value="nino-contact-form-pro-label-position-3">
								<label for="nino-label-position-3">
									<span>Top</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Fonts</label>
					<div class="nino-input nino-select-box-style">
						<select>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<i></i>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Font size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-pane" id="nino-input-settings-2">
		<div class="nino-grid-layout-1 nino-listOfChoice">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<div class="nino-grid-layout-3">
						<div class="nino-grid-col"><h6>List of choice</h6></div>
						<div class="nino-grid-col"><label><input type="checkbox" />Custom value</label></div>
					</div>
					<div class="nino-input">
						<ul>
							<li>
								<div class="nino-grid-layout-3">
									<div class="nino-grid-col">
										<input type="text" value="Option">
									</div>
									<div class="nino-grid-col">
										<input type="text" value="Custom value">
									</div>
									<div class="nino-grid-col">
										<div class="nino-listOfChoiceAction">
											<div class="nino-input-style">
												<input type="radio" checked="" id="nino-radio-listOfChoice-name" name="nino-radio-listOfChoice-group">
												<label for="nino-radio-listOfChoice-name"></label>
											</div>
											<span class="fa fa-close"></span>
											<span class="fa fa-arrows"></span>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="nino-grid-layout-3">
									<div class="nino-grid-col">
										<input type="text" value="Option">
									</div>
									<div class="nino-grid-col">
										<input type="text" value="Custom value">
									</div>
									<div class="nino-grid-col">
										<div class="nino-listOfChoiceAction">
											<div class="nino-input-style">
												<input type="radio" id="nino-radio-listOfChoice-name-1" name="nino-radio-listOfChoice-group">
												<label for="nino-radio-listOfChoice-name-1"></label>
											</div>
											<span class="fa fa-close"></span>
											<span class="fa fa-arrows"></span>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="nino-grid-layout-3">
									<div class="nino-grid-col">
										<input type="text" value="Option">
									</div>
									<div class="nino-grid-col">
										<input type="text" value="Custom value">
									</div>
									<div class="nino-grid-col">
										<div class="nino-listOfChoiceAction">
											<div class="nino-input-style">
												<input type="radio" id="nino-radio-listOfChoice-name-3" name="nino-radio-listOfChoice-group">
												<label for="nino-radio-listOfChoice-name-3"></label>
											</div>
											<span class="fa fa-close"></span>
											<span class="fa fa-arrows"></span>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="nino-grid-layout-3">
									<div class="nino-grid-col">
										<input type="text" value="Option">
									</div>
									<div class="nino-grid-col">
										<input type="text" value="Custom value">
									</div>
									<div class="nino-grid-col">
										<div class="nino-listOfChoiceAction">
											<div class="nino-input-style">
												<input type="radio" id="nino-radio-listOfChoice-name-4" name="nino-radio-listOfChoice-group">
												<label for="nino-radio-listOfChoice-name-4"></label>
											</div>
											<span class="fa fa-close"></span>
											<span class="fa fa-arrows"></span>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<a href="#" class="nino-addMoreChoice"><span class="fa fa-plus"></span> Add more</a>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input Text Color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box"></input>
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Style</label>
					<select>
						<option>style 1</option>
						<option>style 2</option>
						<option>style 3</option>
					</select>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input Size</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-size" id="nino-input-size-1" value="nino-contact-form-pro-input-size-1">
								<label for="nino-input-size-1">
									<span>Small</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-size" id="nino-input-size-2" value="nino-contact-form-pro-input-size-2">
								<label for="nino-input-size-2">
									<span>Medium</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" checked="checked" name="nino-input-size" id="nino-input-size-3" value="nino-contact-form-pro-input-size-3">
								<label for="nino-input-size-3">
									<span>Large</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-1">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Display</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-5">
							<div class="nino-grid-col">
								<input type="radio" name="nino-checkbox-display" id="nino-checkbox-display-1" value="nino-contact-form-pro-checkbox-display-1">
								<label for="nino-checkbox-display-1">
									<span>Inline</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-checkbox-display" id="nino-checkbox-display-2" value="nino-contact-form-pro-checkbox-display-2">
								<label for="nino-checkbox-display-2">
									<span>Horizontal</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-checkbox-display" id="nino-checkbox-display-3" value="nino-contact-form-pro-checkbox-display-3">
								<label for="nino-checkbox-display-3">
									<span>2 Cols</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-checkbox-display" id="nino-checkbox-display-4" value="nino-contact-form-pro-checkbox-display-4">
								<label for="nino-checkbox-display-4">
									<span>3 Cols</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-checkbox-display" id="nino-checkbox-display-5" value="nino-contact-form-pro-checkbox-display-5">
								<label for="nino-checkbox-display-5">
									<span>4 Cols</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Font</label>
					<div class="nino-input nino-select-box-style">
						<select>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<i></i>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Font size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-pane active" id="nino-validation-settings-2">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Required</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-required" id="nino-input-required-1" value="nino-contact-form-pro-input-irequired-1">
								<label for="nino-input-required-1">
									<span>No</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-required" id="nino-input-required-2" value="nino-contact-form-pro-input-required-2">
								<label for="nino-input-required-2">
									<span>Yes</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-1">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Required Message</label>
					<div class="nino-input">
						<input type="text" value="This is a required field" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<hr />



<!-- captcha settings
============================ -->

<h2>Captcha settings</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
	<li><a href="#nino-label-settings-3" role="tab" data-toggle="tab">Label</a></li>
	<li><a href="#nino-input-settings-3" role="tab" data-toggle="tab">Input</a></li>
	<li class="active"><a href="#nino-validation-settings-3" role="tab" data-toggle="tab">Validation</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane" id="nino-label-settings-3">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Captcha Horizontal</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-captcha-horizontal" id="nino-captcha-horizontal-1" value="nino-contact-form-pro-captcha-horizontal-1">
								<label for="nino-captcha-horizontal-1">
									<span>Yes</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-captcha-horizontal" id="nino-captcha-horizontal-2" value="nino-contact-form-pro-captcha-horizontal-2">
								<label for="nino-captcha-horizontal-2">
									<span>No</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label text</label>
					<div class="nino-input">
						<input type="text" value="Label text" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Sub text</label>
					<div class="nino-input">
						<input type="text" value="Sub text" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label icon</label>
					<div class="nino-input">
						<input type="text" class="nino-font-box" name="nino-font-box" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Label position</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-label-position" id="nino-label-position-1" value="nino-contact-form-pro-label-position-1">
								<label for="nino-label-position-1">
									<span>None</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-label-position" id="nino-label-position-2" value="nino-contact-form-pro-label-position-2">
								<label for="nino-label-position-2">
									<span>Left</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" checked="checked" name="nino-label-position" id="nino-label-position-3" value="nino-contact-form-pro-label-position-3">
								<label for="nino-label-position-3">
									<span>Top</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Fonts</label>
					<div class="nino-input nino-select-box-style">
						<select>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<i></i>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Font size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-pane" id="nino-input-settings-3">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Placeholder</label>
					<div class="nino-input">
						<input type="text" value="placeholder" />
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input value</label>
					<div class="nino-input">
						<input type="text" value="input value" />
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Alignment</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-alignment" id="nino-input-alignment-1" value="nino-contact-form-pro-input-alignment-1">
								<label for="nino-input-alignment-1">
									<span>Left</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-alignment" id="nino-input-alignment-2" value="nino-contact-form-pro-input-alignment-2">
								<label for="nino-input-alignment-2">
									<span>Center</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" checked="checked" name="nino-input-alignment" id="nino-input-alignment-3" value="nino-contact-form-pro-input-alignment-3">
								<label for="nino-input-alignment-3">
									<span>Right</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input Size</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-size" id="nino-input-size-1" value="nino-contact-form-pro-input-size-1">
								<label for="nino-input-size-1">
									<span>Small</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-size" id="nino-input-size-2" value="nino-contact-form-pro-input-size-2">
								<label for="nino-input-size-2">
									<span>Medium</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" checked="checked" name="nino-input-size" id="nino-input-size-3" value="nino-contact-form-pro-input-size-3">
								<label for="nino-input-size-3">
									<span>Large</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input Text Color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box"></input>
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input Background color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box"></input>
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-3">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Border color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box"></input>
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Border width <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Border radius <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Input icon</label>
					<div class="nino-input">
						<input type="text" class="nino-font-box" name="nino-font-box" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Icon position</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-2">
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-icon-position" id="nino-input-icon-position-1" value="nino-contact-form-pro-input-icon-position-1">
								<label for="nino-input-icon-position-1">
									<span>Left</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-icon-position" id="nino-input-icon-position-2" value="nino-contact-form-pro-input-icon-position-2">
								<label for="nino-input-icon-position-2">
									<span>Right</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Fonts</label>
					<div class="nino-input nino-select-box-style">
						<select>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<i></i>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Font size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Refresh Icon</label>
					<div class="nino-input">
						<input type="text" class="nino-font-box" name="nino-font-box" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Captcha style</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-captcha-style" id="nino-captcha-style-1" value="nino-contact-form-pro-captcha-style-1">
								<label for="nino-captcha-style-1">
									<span>Style 1</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-captcha-style" id="nino-captcha-style-2" value="nino-contact-form-pro-captcha-style-2">
								<label for="nino-captcha-style-2">
									<span>Style 1</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-captcha-style" id="nino-captcha-style-3" value="nino-contact-form-pro-captcha-style-3">
								<label for="nino-captcha-style-3">
									<span>Style 3</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-pane active" id="nino-validation-settings-3">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Required</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-required" id="nino-input-required-1" value="nino-contact-form-pro-input-irequired-1">
								<label for="nino-input-required-1">
									<span>No</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-input-required" id="nino-input-required-2" value="nino-contact-form-pro-input-required-2">
								<label for="nino-input-required-2">
									<span>Yes</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-1">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Required Message</label>
					<div class="nino-input">
						<input type="text" value="This is a required field" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<hr>

<!-- heading settings
============================ -->

<h2>Heading settings</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
	<li class="active"><a href="#nino-label-settings-4" role="tab" data-toggle="tab">Text</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane active" id="nino-label-settings-4">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Heading text</label>
					<div class="nino-input">
						<input type="text" value="Heading text">
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<div class="nino-formGroup">
						<label>Alignment</label>
						<div class="nino-input radioHidden">
							<div class="nino-grid-layout-3">
								<div class="nino-grid-col">
									<input type="radio" value="nino-contact-form-pro-input-alignment-1" id="nino-input-alignment-1" name="nino-input-alignment">
									<label for="nino-input-alignment-1">
										<span>Left</span>
									</label>
								</div>
								<div class="nino-grid-col">
									<input type="radio" value="nino-contact-form-pro-input-alignment-2" id="nino-input-alignment-2" name="nino-input-alignment">
									<label for="nino-input-alignment-2">
										<span>Center</span>
									</label>
								</div>
								<div class="nino-grid-col">
									<input type="radio" value="nino-contact-form-pro-input-alignment-3" id="nino-input-alignment-3" name="nino-input-alignment">
									<label for="nino-input-alignment-3">
										<span>Right</span>
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Heading icon</label>
					<div class="nino-input">
						<input type="text" class="nino-font-box" name="nino-font-box" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Icon Size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Fonts</label>
					<div class="nino-input nino-select-box-style">
						<select>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<i></i>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<div class="nino-formGroup nino-slider-range">
						<label>Font Size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
						<div class="nino-input">
							<div class="nino-slider-range-max"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<hr>

<!-- Paragraph settings
============================ -->

<h2>Paragraph settings</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
	<li class="active"><a href="#nino-label-settings-5" role="tab" data-toggle="tab">Text</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane active" id="nino-label-settings-5">
		<div class="nino-grid-layout-1">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<textarea rows="6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</textarea>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Text Color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box">
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-1">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Alignment</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-4">
							<div class="nino-grid-col">
								<input type="radio" value="nino-contact-form-pro-input-alignment-1" id="nino-input-alignment-1" name="nino-input-alignment">
								<label for="nino-input-alignment-1">
									<span>Left</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" value="nino-contact-form-pro-input-alignment-2" id="nino-input-alignment-2" name="nino-input-alignment">
								<label for="nino-input-alignment-2">
									<span>Center</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" value="nino-contact-form-pro-input-alignment-3" id="nino-input-alignment-3" name="nino-input-alignment">
								<label for="nino-input-alignment-3">
									<span>Right</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" value="nino-contact-form-pro-input-alignment-4" id="nino-input-alignment-4" name="nino-input-alignment">
								<label for="nino-input-alignment-4">
									<span>Justify</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Fonts</label>
					<div class="nino-input nino-select-box-style">
						<select>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<i></i>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<div class="nino-formGroup nino-slider-range">
						<label>Font Size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
						<div class="nino-input">
							<div class="nino-slider-range-max"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>



<hr>

<!-- Map settings
============================ -->

<h2>Map settings</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
	<li class="active"><a href="#nino-label-settings-6" role="tab" data-toggle="tab">Map</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane active" id="nino-label-settings-6">

		<div class="nino-grid-layout-1">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<textarea rows="6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</textarea>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-3">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Width</label>
					<div class="nino-input">
						<input type="number" />
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Height</label>
					<div class="nino-input">
						<input type="number" />
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-3">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Border color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box" />
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Border width <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Border radius <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>



<hr>

<!-- Social link
============================ -->

<h2>Social link settings</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
	<li class="active"><a href="#nino-label-settings-7" role="tab" data-toggle="tab">Social link</a></li>
	<li><a href="#nino-style-settings-7" role="tab" data-toggle="tab">Style</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane active" id="nino-label-settings-7">
		<div class="nino-grid-layout-1 nino-socialLink">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<div class="nino-input">
						<ul>
							<li>
								<span class="fa fa-close nino-removeSocial" title="remove"></span>
								<div class="nino-grid-layout-2">
									<div class="nino-grid-col">
										<div class="nino-formGroup">
											<label>Social icon / color</label>
											<div class="nino-input">
												<input type="text" class="nino-font-box" name="nino-font-box" />
												<div class="nino-color-box"></div>
											</div>
										</div>
									</div>
									<div class="nino-grid-col">
										<div class="nino-formGroup nino-slider-range">
											<label>Size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
											<div class="nino-input">
												<div class="nino-slider-range-max"></div>
											</div>
										</div>
									</div>
								</div>
								<div class="nino-grid-layout-1">
									<div class="nino-grid-col">
										<div class="nino-input nino-socialLinkUrl">
											<input type="text" placeholder="Social Link Here" />
										</div>
									</div>
								</div>
							</li>
							<li>
								<span class="fa fa-close nino-removeSocial" title="remove"></span>
								<div class="nino-grid-layout-2">
									<div class="nino-grid-col">
										<div class="nino-formGroup">
											<label>Social icon / color</label>
											<div class="nino-input">
												<input type="text" class="nino-font-box" name="nino-font-box" />
												<div class="nino-color-box"></div>
											</div>
										</div>
									</div>
									<div class="nino-grid-col">
										<div class="nino-formGroup nino-slider-range">
											<label>Size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
											<div class="nino-input">
												<div class="nino-slider-range-max"></div>
											</div>
										</div>
									</div>
								</div>
								<div class="nino-grid-layout-1">
									<div class="nino-grid-col">
										<div class="nino-input nino-socialLinkUrl">
											<input type="text" placeholder="Social Link Here" />
										</div>
									</div>
								</div>
							</li>
						</ul>
						<div class="nino-grid-layout-1">
							<div class="nino-grid-col">
								<a href="#" class="nino-addMoreChoice"><span class="fa fa-plus"></span> Add new social</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-pane" id="nino-style-settings-7">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Horizontal</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-social-horizontal" id="nino-social-horizontal-1" value="nino-contact-form-pro-social-horizontal-1">
								<label for="nino-social-horizontal-1">
									<span>Yes</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-social-horizontal" id="nino-social-horizontal-2" value="nino-contact-form-pro-social-horizontal-2">
								<label for="nino-social-horizontal-2">
									<span>No</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Alignment</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" value="nino-contact-form-pro-social-alignment-1" id="nino-social-alignment-1" name="nino-social-alignment">
								<label for="nino-social-alignment-1">
									<span>Left</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" value="nino-contact-form-pro-social-alignment-2" id="nino-social-alignment-2" name="nino-social-alignment">
								<label for="nino-social-alignment-2">
									<span>Center</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" value="nino-contact-form-pro-social-alignment-3" id="nino-social-alignment-3" name="nino-social-alignment">
								<label for="nino-social-alignment-3">
									<span>Right</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-1">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Effects</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-5">
							<div class="nino-grid-col">
								<input type="radio" name="nino-social-effects" id="nino-social-effects-1" value="nino-contact-form-pro-social-effects-1">
								<label for="nino-social-effects-1">
									<span>Effects 1</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-social-effects" id="nino-social-effects-2" value="nino-contact-form-pro-social-effects-2">
								<label for="nino-social-effects-2">
									<span>Effects 2</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-social-effects" id="nino-social-effects-3" value="nino-contact-form-pro-social-effects-3">
								<label for="nino-social-effects-3">
									<span>Effects 3</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-social-effects" id="nino-social-effects-4" value="nino-contact-form-pro-social-effects-4">
								<label for="nino-social-effects-4">
									<span>Effects 4</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-social-effects" id="nino-social-effects-5" value="nino-contact-form-pro-social-effects-5">
								<label for="nino-social-effects-5">
									<span>Effects 5</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>



<hr>

<!-- Image settings
============================ -->

<h2>Image settings</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
	<li class="active"><a href="#nino-label-settings-8" role="tab" data-toggle="tab">Image</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane active" id="nino-label-settings-8">
		<div class="nino-grid-layout-1">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Url</label>
					<div class="nino-input">
						<input type="text">
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-3">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Border color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box" />
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Border width <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Border radius <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>



<hr>


<!-- Image settings
============================ -->

<h2>Divider</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
	<li class="active"><a href="#nino-label-settings-9" role="tab" data-toggle="tab">Divider</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane active" id="nino-label-settings-9">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box" />
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Border radius <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Width</label>
					<div class="nino-input">
						<input type="number" />
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Height</label>
					<div class="nino-input">
						<input type="number" />
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Alignment</label>
					<div class="nino-input radioHidden">
						<div class="nino-grid-layout-3">
							<div class="nino-grid-col">
								<input type="radio" name="nino-divider-alignment" id="nino-divider-alignment-1" value="nino-contact-form-pro-divider-alignment-1">
								<label for="nino-divider-alignment-1">
									<span>Left</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-divider-alignment" id="nino-divider-alignment-2" value="nino-contact-form-pro-divider-alignment-2">
								<label for="nino-divider-alignment-2">
									<span>Center</span>
								</label>
							</div>
							<div class="nino-grid-col">
								<input type="radio" name="nino-divider-alignment" id="nino-divider-alignment-3" value="nino-contact-form-pro-divider-alignment-3">
								<label for="nino-divider-alignment-3">
									<span>Right</span>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>



<hr>



<!-- Submit button settings
============================ -->

<h2>Submit button settings</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
	<li class="active"><a href="#nino-label-settings-10" role="tab" data-toggle="tab">Submit</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane active" id="nino-label-settings-10">
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Text</label>
					<div class="nino-input">
						<input type="text" value="submit" />
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<div class="nino-formGroup">
						<label>Button Size</label>
						<div class="nino-input radioHidden">
							<div class="nino-grid-layout-3">
								<div class="nino-grid-col">
									<input type="radio" value="nino-contact-form-pro-button-size-1" id="nino-button-size-1" name="nino-button-size">
									<label for="nino-button-size-1">
										<span>Small</span>
									</label>
								</div>
								<div class="nino-grid-col">
									<input type="radio" value="nino-contact-form-pro-button-size-2" id="nino-button-size-2" name="nino-button-size">
									<label for="nino-button-size-2">
										<span>Medium</span>
									</label>
								</div>
								<div class="nino-grid-col">
									<input type="radio" value="nino-contact-form-pro-button-size-3" id="nino-button-size-3" name="nino-button-size">
									<label for="nino-button-size-3">
										<span>Large</span>
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Text Color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box">
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Background</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box">
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-3">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Border color</label>
					<div class="nino-input nino-input-color">
						<input type="text" class="nino-input-color-box" />
						<div class="nino-input-color-display"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Border width <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Border radius <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Icon</label>
					<div class="nino-input">
						<input type="text" class="nino-font-box" name="nino-font-box" />
						<div class="nino-color-box"></div>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Icon Size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Width (%)</label>
					<input type="number" />
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<div class="nino-formGroup">
						<label>Position</label>
						<div class="nino-input radioHidden">
							<div class="nino-grid-layout-3">
								<div class="nino-grid-col">
									<input type="radio" value="nino-contact-form-pro-button-position-1" id="nino-button-position-1" name="nino-button-position">
									<label for="nino-button-position-1">
										<span>Left</span>
									</label>
								</div>
								<div class="nino-grid-col">
									<input type="radio" value="nino-contact-form-pro-button-position-2" id="nino-button-position-2" name="nino-button-position">
									<label for="nino-button-position-2">
										<span>Center</span>
									</label>
								</div>
								<div class="nino-grid-col">
									<input type="radio" value="nino-contact-form-pro-button-position-3" id="nino-button-position-3" name="nino-button-position">
									<label for="nino-button-position-3">
										<span>Right</span>
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nino-grid-layout-2">
			<div class="nino-grid-col">
				<div class="nino-formGroup">
					<label>Fonts</label>
					<div class="nino-input nino-select-box-style">
						<select>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<i></i>
					</div>
				</div>
			</div>
			<div class="nino-grid-col">
				<div class="nino-formGroup nino-slider-range">
					<label>Font size <input type="text" class="nino-amount" readonly style="border:0; color:#f6931f; display: inline-block;"></label>
					<div class="nino-input">
						<div class="nino-slider-range-max"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>